<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between;margin-top: 10px">
        <div>
          <el-input size="mini" style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    v-model="unickName"
                    @keydown.enter.native="initUserList"
                    clearable
                    @clear="initUserList"
                    placeholder="请输入用户昵称进行搜索...">
          </el-input>
          <el-button  size="mini"
                      type="primary" icon="el-icon-search" @click="initUserList">搜索
          </el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="ul"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="用户编号"
            fixed
            align="center"
            width="100">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="username"-->
<!--            label="用户账号"-->
<!--            align="left"-->
<!--            width="100">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="unickName"
            label="用户昵称"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="uphoneNum"
            label="联系电话"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="uaddress"
            label="联系地址"
            align="left"
            width="240">
        </el-table-column>
        <el-table-column
            label="用户身份"
            align="left"
            width="150">
          <template scope="scope">
            <el-tag type="primary" >{{scope.row.roles[0]["nameZh"]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="账号状态"
            align="left"
            width="90">
          <template scope="scope">
            <el-tag type="success" v-if="scope.row.isEnabled==1">启用中</el-tag>
            <el-tag type="danger" v-else>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="160">
          <template slot-scope="scope">
            <el-button :disabled="disable1" @click="banUser(scope.row)" style="padding: 3px" size="mini" type="primary">禁用</el-button>
            <el-button :disabled="disable2" @click="reUseUser(scope.row)"  style="padding: 3px" size="mini" type="primary">解禁</el-button>
            <el-button @click="deleteUser(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout='sizes, prev, pager, next, jumper, ->, total'
            :page-size="size"
            :page-sizes="[5,10,20,30,40]"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserList",
  data(){
    return {
      loading:false,
      ul:[],
      roles:[],
      total:0,
      currentPage:1,
      username:"",
      size:5,
      unickName:"",
      disable1:false,
      disable2:true
    }
  },
  mounted() {
    this.initUserList();
  },
  methods: {
    reUseUser(data){
      this.$confirm('是否解禁用户：【'+data.unickName+'】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.disable2 = true;
        this.disable1 = false;
        this.putRequest('/user/reuse/'+data.id).then(resp=>{
          if (resp){
            this.initUserList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    banUser(data){
      this.$confirm('是否禁用用户：【'+data.unickName+'】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.disable1 = true;
        this.disable2 = false;
        this.putRequest('/user/ban/'+data.id).then(resp=>{
          if (resp){
            this.initUserList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    deleteUser(data){
      this.$confirm('是否永久删除用户【'+data.unickName+'】的账号信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/user/'+data.id).then(resp=>{
          if (resp){
            this.initUserList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },

    sizeChange(size){
      this.size = size;
      this.initUserList();
    },
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initUserList();
    },
    initUserList(){
      this.loading = true;
      let url = '/user/?currentPage='+this.currentPage+'&size='+this.size+'&uNickName='+this.unickName;
      console.log(url);
      this.getRequest(url).then(resp=>{
        this.loading = false;
        if (resp){
          this.ul = resp.data;
          // console.log(resp.data[0]["unickName"]);
          // console.log(this.ul[0]["roles"][0]["nameZh"]);
          // console.log(JSON.parse(JSON.stringify(this.ul[0]["roles"]))[0]["nameZh"]);
          this.total = resp.total;
        }
      })
    },
  }
}
</script>

<style scoped>

</style>